<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<title>烟花源码：https://ondras.github.io/fireworks/</title>
		<script type="text/javascript" src="./oz.js"></script>
		<script type="text/javascript" src="./fireworks.js"></script>
		<style>
			body {
				background-color: rgba(0, 0, 0, 1);
				margin: 0 auto;
				overflow: hidden;
			}

			canvas {
				cursor: pointer;
			}

			h1 {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				width: 100%;
				text-align: center;
				color: #fff;
			}

			#status {
				font-family: sans-serif;
				font-size: 20px;
				position: absolute;
				right: 0px;
				bottom: 0px;
				text-align: right;
				color: #fff;
			}

			.moon {
				position: fixed;
				width: 170px;
				height: 170px;
				margin: 0 auto;
				top: 0;
				left: 100px;
				z-index: 99;
			}

			.starry::after {
				content: '';
				width: 100px;
				height: 100px;
				position: absolute;
				top: -106px;
				border-radius: 50%;
				box-shadow: #fff -25px 0;
				animation: starry 5s ease-in-out infinite;
				transform: rotate(-5deg);
				transform-origin: 0 50%;
			}

			.starry {
				width: 4px;
				height: 4px;
				position: absolute;
				top: 150px;
				left: 80px;
				margin-left: -10px;
				background: #fff;
				border-radius: 50%;
				opacity: 1;
				box-shadow: #fff 26px 7px 0 -1px,
					rgba(255, 255, 255, 0.1) -36px -34px 0 -1px,
					rgba(255, 255, 255, 0.1) -51px -34px 0 -1px,
					#fff -52px -62px 0 -1px,
					#fff 14px -37px,
			 	rgba(255, 255, 255, 0.1) 41px -19px,
					#fff 34px -50px,
					rgba(255, 255, 255, 0.1) 14px -71px 0 -1px,
					#fff 64px -21px 0 -1px,
					rgba(255, 255, 255, 0.1) 32px -85px 0 -1px,
					#fff 64px -90px,
					rgba(255, 255, 255, 0.1) 60px -67px 0 -1px,
					#fff 34px -127px,
					rgba(255, 255, 255, 0.1) -26px -103px 0 -1px;
				animation: starry_star 5s ease-in-out infinite;
			}

			@keyframes starry_star {
				50% {
					box-shadow: rgba(255, 255, 255, 0.1) 26px 7px 0 -1px,
						#fff -36px -34px 0 -1px,
						#fff -51px -34px 0 -1px,
						rgba(255, 255, 255, 0.1) -52px -62px 0 -1px,
						rgba(255, 255, 255, 0.1) 14px -37px,
						#fff 41px -19px,
						rgba(255, 255, 255, 0.1) 34px -50px,
						#fff 14px -71px 0 -1px,
						rgba(255, 255, 255, 0.1) 64px -21px 0 -1px,
						#fff 32px -85px 0 -1px,
						rgba(255, 255, 255, 0.1) 64px -90px,
						#fff 60px -67px 0 -1px,
						rgba(255, 255, 255, 0.1) 34px -127px,
						#fff -26px -103px 0 -1px;
				}
			}
		</style>
	</head>

	<body>
		<h1>恭喜你成功通关，蓄力点击屏幕给自己放个大烟花吧</h1>
		<div class="moon">
			<div class="starry"></div>
		</div>
		<div id="status"></div>
		<canvas id="canvas" width="800" height="600"></canvas>
		<script type="text/javascript">
			var c = OZ.$("canvas");
			var f = new Fireworks(c);
			var downTime = 0;

			OZ.Event.add(c, "mousedown", down);
			OZ.Event.add(c, "mouseup", up);

			function down(e) {
				if (timeout) {
					window.clearTimeout(timeout)
				}
				downTime = new Date().getTime();
			}

			function RandomNum(Min, Max) {
				var Range = Max - Min;
				var Rand = Math.random();
				var num = Min + Math.floor(Rand * Range); //舍去
				return num;
			}

			function up(e, x1, y1, diff) {
				var time = new Date().getTime();
				if (!diff) {
					diff = time - downTime;
				}
				var c = OZ.Event.target(e) || document.querySelector('#canvas');
				var pos = OZ.DOM.pos(c);
				var x = (e.clientX || x1) - pos[0];
				var y = (e.clientY || y1) - pos[1];

				var options = {
					shape: -1,
					/* 0 sphere, 1 circle, 2 spiral, -1 random */
					color: -1,
					/* number, -1 random color */
					speed: Math.max(0.3, Math.min(diff / 100, 8)),
					/* number, -1 random */
					particles: -1,
					/* number, -1 random */
					secondary: -1,
					/* 1 yes, 0 no, -1 random */
					secondaryColor: -1,
					/* number, -1 random color */
				}

				f.createRandom(x, y, options);
				f.createRandom(x, y, options);
			}

			function RandomNum(Min, Max) {
				var Range = Max - Min;
				var Rand = Math.random();
				var num = Min + Math.floor(Rand * Range); //舍去
				return num;
			}
			let timeout

			function time() {
				timeout = window.setTimeout(() => {
					up(document, RandomNum(100, document.body.clientWidth), RandomNum(0, document.body.clientHeight),
						RandomNum(100, 5000))
					time()
				}, 500)
			}
			document.addEventListener('DOMContentLoaded', () => {
				up(document, RandomNum(100, document.body.clientWidth), RandomNum(0, document.body.clientHeight),
					RandomNum(100, 5000))
				time()
			})
		</script>
	</body>
</html>
